<template>
  <view class="content">
    <view class="contentbox" :style="'height:'+headHeight+'px;background-color: rgba(255, 255, 255, '+nums+')'"
          @click="goBack">
      <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
        <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
        <view>开票历史</view>
      </view>
    </view>
    <image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
    <view class="nos" :style="'margin-top: '+headHeight+'px;'"></view>
    <view class="list" v-for="(item,index) in list" @click="goDetail(item)">
      <view class="one">
        <view class="time">{{ item.creatDt }}</view>
        <view class="state">已开票</view>
      </view>
      <view class="two">
        <view class="lcon">
          <view class="title">{{ type[item.orderType] }}</view>
          <view class="type">电子发票</view>
        </view>
        <view class="money">￥
          <text>{{ (item.xmje / 100).toFixed(2) }}</text>
        </view>
      </view>
      <view class="three" v-if="false">
        <view class="apply">申请重开发票</view>
        <view class="look">查看发票</view>
      </view>
    </view>
    <view class="null"></view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import {postForm} from "../../api/myHttps";

export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0,
      nums: 0,

      list: [],
      type: {
        'park_fee': '公共停车场',
        'road_fee': '道路停车',
        'plate_renew': '包月订单',
      }
    }
  },
  onLoad() {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20

    this.listOrder();
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    listOrder() {
      const endDate = dayjs().format('YYYY-MM-DD') + ' 23:59:59';
      // todo：日期可选择
      const startDate = dayjs().subtract(3, 'month').format('YYYY-MM-DD') + ' 00:00:00';
      let ownerId = uni.getStorageSync("ownerId");
      postForm(`/city-mobile/invoice/listInvoiceRec?ownerId=${ownerId}&size=-1&current=1&startDate=${startDate}&endDate=${endDate}`).then(res => {
        this.list = res.records;
        console.log('列表', this.list);
      }).catch(err => {
        console.log('列表错误', err);
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: '/pages/invoiceDetail/invoiceDetail?orderNo=' + item.orderNo
      })
    },
  },
  onPageScroll(e) {
    if (e.scrollTop > 10) {
      console.log(111)
      this.nums = 1
    } else {
      this.nums = 0
      console.log(222)
    }
  },
}
</script>

<style lang="scss">
page {
  background-color: #F4FAF7;
}

.null {
  width: 750rpx;
  height: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img {
  width: 750rpx;
  height: 520rpx;
  position: absolute;
  top: 0;
}

.contentbox {
  width: 750rpx;
  position: fixed;
  top: 0;
  z-index: 999;
  transition: background-color 500ms;
  background-color: #ffffff00;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    view {
      margin-left: 22rpx;
      font-size: 36rpx;
      color: #1C274C;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

.list {
  width: 690rpx;
  padding: 20rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  position: relative;

  .one {
    width: 650rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20rpx;

    .time {
      color: rgba(28, 39, 76, 0.60);
      font-size: 24rpx;
      line-height: 32rpx;
    }

    .state {
      color: #24A7CE;
      font-size: 24rpx;
      line-height: 32rpx;
    }
  }

  .two {
    width: 650rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20rpx;
    border-radius: 8rpx;
    background: linear-gradient(90deg, #F4FAF7 0%, rgba(244, 250, 247, 0.00) 100%);
    padding: 20rpx 0;
    margin-top: 20rpx;

    .lcon {
      display: flex;
      align-items: center;

      .title {
        color: #1C274C;
        font-size: 36rpx;
        font-weight: 600;
        margin-left: 10rpx;
        line-height: 48rpx;
      }

      .type {
        width: 116rpx;
        text-align: center;
        line-height: 40rpx;
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #24A7CE;
        border-radius: 8rpx;
        background: linear-gradient(0deg, rgba(36, 167, 206, 0.20) 0%, rgba(36, 167, 206, 0.20) 100%), #FFF;
      }
    }

    .money {
      font-size: 36rpx;
      color: #1C274C;

      text {
        font-weight: 600;
      }
    }
  }

  .three {
    width: 650rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 20rpx;
    margin-top: 20rpx;

    .apply {
      width: 224rpx;
      height: 48rpx;
      font-size: 24rpx;
      line-height: 48rpx;
      color: #FF2C41;
      border-radius: 50rpx;
      background: rgba(255, 44, 65, 0.10);
      text-align: center;
      box-sizing: border-box;
    }

    .look {
      width: 176rpx;
      height: 48rpx;
      font-size: 24rpx;
      line-height: 48rpx;
      border-radius: 50rpx;
      text-align: center;
      border: 1px solid rgba(28, 39, 76, 0.10);
      box-sizing: border-box;
      margin-left: 10rpx;
      color: rgba(28, 39, 76, 0.60);
    }
  }
}
</style>
